<!DOCTYPE html>
<!-- zh-Hans 简体中文 -->
<html lang="zh-Hans">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
    
    <link rel="stylesheet" href="./css/index.css" />
</head>

<body>
    <h1>HTML &lt;meta&gt; 标签</h1>

    <h2>定义与用法</h2>

    <h3>参考链接</h3>
    <p><a target="_blank" href="https://www.w3school.com.cn/tags/tag_meta.asp">HTML &lt;meta&gt; 标签</a></p>

    <h3>摘抄</h3>
    <p>&lt;meta&gt; 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。</p>
    <p>&lt;meta&gt; 标签位于文档的头部，不包含任何内容。&lt;meta&gt; 标签的属性定义了与文档相关联的名称/值对。</p>

    <h2>常见用法</h2>

    <h3 id="attr_charset">charset</h3>
    <p>charset属性指定HTML文档的字符编码</p>
    <pre>
&lt;meta charset=&quot;utf-8&quot; /&gt;
    </pre>

    <h3 id="attr_x_ua_compatible">X-UA-Compatible</h3>
    <p>X-UA-Compatible是自IE8后,新加的一个设置，对于IE8以下的浏览器是不识别的。 通过在meta中设置X-UA-Compatible的值，可以指定网页的兼容性模式设置。</p>
    <pre>
&lt;!-- 以下代码, IE = edge告诉IE使用最新的引擎渲染网页，chrome = 1则可以激活Chrome Frame . --&gt;
&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge, chrome=1&quot; /&gt;
    </pre>

    <h3 id="attr_viewport">viewport</h3>
    <h4>参考链接</h4>
    <p><a target="_blank" href="https://developer.mozilla.org/zh-CN/docs/Mobile/Viewport_meta_tag"">在移动浏览器中使用viewport元标签控制布局</a></p>
    <p><a target=" _blank" href="https://www.cnblogs.com/2050/p/3877280.html"">移动前端开发之viewport的深入理解</a></p>


    <h4>注释</h4>
    <p>viewport主要用途是用于移动端页面适配。</p>
    <pre>
&lt;!-- width=device-width 让当前视图的宽度等于设备的宽度 --&gt;
&lt;!-- initial-scale=1.0 设置页面的初始缩放值 --&gt;
&lt;!-- maximum-scale=1 允许用户的最大缩放值 --&gt;
&lt;!-- minimum-scale=1 允许用户的最小缩放值 --&gt;
&lt;!-- user-scalable=no 是否允许用户进行缩放，值为&quot;no&quot;或&quot;yes&quot;, no 代表不允许，yes代表允许 --&gt;


&lt;meta name=&quot;viewport&quot;content=&quot;width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no&quot;&gt;
    </pre>


</body>

</html>